<template>
	<view class="applicationCollection">
		<view>
			<view class="hintLine"><text style="color: #DD3123;">*</text>请填写收款信息</view>
			<view class="oneLine">
				<text>店铺名称</text>
				<input placeholder="最多20个字符" maxlength="20" v-model="storeName" />
			</view>
		</view>
		<view>
			<view class="hintLine"><text style="color: #DD3123;">*</text>请填写本人储蓄卡，收款码的钱将直接打到该卡中</view>
			<view class="oneLine">
				<text>银行卡号</text>
				<input placeholder="请填写银行卡号" maxlength="20" v-model="cardNum" type="number" />
			</view>
		</view>
		<view>
			<view class="hintLine"><text style="color: #DD3123;">*</text>请填写本人手机号</view>
			<view class="oneLine">
				<text>手机号</text>
				<input placeholder="请填写本人手机号" maxlength="11" v-model="phone" type="number" />
			</view>
		</view>
		<view class="submitBtn flex" @click="onSubmit()">提交</view>
	</view>
</template>

<script>
	import {
		applyCollectionCode,
		moneyQrCode
	} from "../../api/index.js"
	export default {
		data() {
			return {
				storeName: '',
				cardNum: '',
				phone: ''
			}
		},
		onLoad(opt) {
			this.bid = opt.bid
		},
		methods: {
			// 申请收款码
			async onApplyCollectionCode() {
				const res = await applyCollectionCode('s=/ApiBusiness/applycollectioncode', {
					bid: this.bid,
					shopname: this.storeName,
					cardnum: this.cardNum,
					phone: this.phone
				})
				const {
					status,
					msg
				} = res.data
				this.showToast(msg)
				if (status == 1) {
					console.log(res, "res----")
					this.goBack(2000)
				}
			},
			onSubmit() {
				const {
					storeName,
					cardNum,
					phone
				} = this
				switch (true) {
					case storeName == '':
						this.showToast('请输入店铺名称')
						break;
					case !/^[1-9]([0-9]{15,18})$/.test(cardNum):
						this.showToast('请输入正确银行卡号')
						break;
					case !/^1[3456789]\d{9}$/.test(phone):
						this.showToast('请输入正确手机号')
						break;
					default:
						this.onApplyCollectionCode()
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.submitBtn {
		margin: 50rpx 0;
		color: #fff;
		font-size: 34rpx;
		background: #41644A;
		border-radius: 14rpx;
		padding: 20rpx 0;
		justify-content: center;
	}

	.oneLine {
		width: 93%;
		font-size: 30rpx;
		background: #fff;
		height: 105rpx;
		border-radius: 8rpx;
		padding: 0 26rpx;
		display: inline-flex;
		align-items: center;
		margin: 21rpx 0 49rpx 0;
		color: #333;

		input {
			height: 100%;
			width: 67%;
			margin-left: 58rpx;
		}
	}

	.applicationCollection {
		height: 90vh;
		background: #f7f7f7;
		padding: 40rpx 30rpx;
	}

	.hintLine {
		font-size: 26rpx;
		color: #666666;

	}
</style>